@spreadsheet-header-border: @spreadsheet-pane-border;
@spreadsheet-header-background: @base;
@spreadsheet-pane-border: darken(@base, 20%);
@spreadsheet-cell-border: darken(@base, 10%);
@spreadsheet-selection-background: fadeout(@selected-background, 80%);
@spreadsheet-selection-border: @selected-background;
@spreadsheet-header-selection-border: fadein(@spreadsheet-selection-background, 80%);
@spreadsheet-page-orientation-background: @normal-background;
@spreadsheet-page-orientation-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
@spreadsheet-page-orientation-gradient: @normal-gradient;

.k-spreadsheet-row-header,
.k-spreadsheet-column-header {
    background-color: @background;
}

.k-spreadsheet-top-corner,
.k-spreadsheet-row-header,
.k-spreadsheet-column-header {
    background-color: @spreadsheet-header-background;
    background-image: none;
    color: contrast(@spreadsheet-header-background);
    border-color: @spreadsheet-header-border;
}

.k-spreadsheet-top-corner {
    border-color: @spreadsheet-header-border;

    &:after {
        border-color: transparent @spreadsheet-header-border @spreadsheet-header-border transparent;
    }
}

.k-spreadsheet-pane {
    border-color: @spreadsheet-pane-border;

    .k-spreadsheet-vaxis,
    .k-spreadsheet-haxis {
        border-color: @spreadsheet-cell-border;
    }

    .k-spreadsheet-column-header,
    .k-spreadsheet-row-header {
        border-color: @spreadsheet-header-border;
    }

    .k-spreadsheet-merged-cell {
        background-color: @background;
    }

    .k-selection-partial,
    .k-selection-full {
        border-color: @spreadsheet-selection-background;
        background-color: @spreadsheet-selection-background;
    }

    .k-filter-range {
        border-color: @spreadsheet-selection-border;
    }

    .k-spreadsheet-column-header .k-selection-partial,
    .k-spreadsheet-column-header .k-selection-full {
        border-bottom-color: @spreadsheet-header-selection-border;
    }

    .k-spreadsheet-row-header .k-selection-partial,
    .k-spreadsheet-row-header .k-selection-full {
        border-right-color: @spreadsheet-header-selection-border;
    }
}

.k-auto-fill,
.k-spreadsheet-selection {
    border-color: @spreadsheet-selection-border;
    box-shadow: inset 0 0 0 1px @background, 0 0 0 1px @spreadsheet-selection-border;
}

.k-spreadsheet-selection {
    background-color: @spreadsheet-selection-background;
}

.k-spreadsheet-active-cell {
    // enforce border color of active cell to match selection
    border-color: @spreadsheet-selection-border !important;
    background-color: @background;
}

.k-spreadsheet-active-cell.k-single {
    background-color: #fff;
}

.k-spreadsheet {
    > .k-spreadsheet-formula-bar  {
        background-color: @background;
        border-color: @spreadsheet-header-background @spreadsheet-header-background @spreadsheet-header-border;

        &:before {
            border-color: @spreadsheet-header-border;
        }

        &:after {
            border-color: @spreadsheet-header-background;
        }
    }

    .k-spreadsheet-formula-input {
        background-color: @background;
        color: @normal-text-color;
    }

    .k-resize-handle,
    .k-resize-hint-handle,
    .k-resize-hint-marker {
        background-color: @selected-background;
    }

    .k-resize-hint-vertical .k-resize-hint-handle,
    .k-resize-hint-vertical .k-resize-hint-marker {
        background-color: @selected-background;
    }

    .k-single-selection::after {
        background-color: @spreadsheet-selection-border;
        border-color: @background;
    }

    .k-auto-fill-punch {
        background-color: fadeout(@background, 50%);
    }

    .k-single-selection.k-dim-auto-fill-handle::after {
        background-color: fadeout(@spreadsheet-selection-border, 50%);
    }
}

.k-spreadsheet-format-cells .k-spreadsheet-preview {
    border-color: @widget-border-color;
}

.k-spreadsheet-filter {
    border-radius: @border-radius;
    background-color: @background;

    box-shadow: inset 0 0 0 1px @spreadsheet-cell-border;

    &.k-state-active {
        color: @selected-text-color;
        background-color: @selected-background;
    }

    &:hover {
        color: @hover-text-color;
        background: @hover-background;
        border-color: darken(@hover-background, 8%);
    }
}

.k-action-window .k-action-buttons {
    border-color: @widget-border-color;
}

.k-spreadsheet-sample {
    color: lighten(@normal-text-color, 30%);

    .k-state-selected & {
        color: inherit;
    }
}

.k-spreadsheet-window .k-list-wrapper,
.k-spreadsheet-window .k-list {
    border-color: @widget-border-color;
    border-radius: @border-radius;
}

.k-spreadsheet-window {
    .export-config,
    .k-edit-field > .k-orientation-label {
        border-color: @widget-border-color;
    }

    .k-edit-field > input[type="radio"]:checked+.k-orientation-label {
        .composite-background(@spreadsheet-page-orientation-gradient);
        background-color: @accent;
        color: lighten(@selected-text-color, 12%);
    }

    .k-page-orientation {
        border-color: @spreadsheet-page-orientation-border-color;
        box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1)
    }

    .k-page-orientation:before {
        background: @spreadsheet-page-orientation-background;
        border-color: transparent;
        border-bottom-color: @spreadsheet-page-orientation-border-color;
        border-left-color: @spreadsheet-page-orientation-border-color;
    }

    .k-margins-horizontal,
    .k-margins-vertical {
        background: transparent;
        border-color: @widget-border-color;
    }
}

.k-spreadsheet-toolbar {
    &.k-toolbar .k-button-group .k-button {
        border-radius: @border-radius;
    }

    > .k-widget,
    > .k-button,
    > .k-button-group {
        border-radius: @border-radius;
    }

    > .k-separator {
        border-color: @widget-border-color;
    }

    .k-overflow-anchor {
        border-radius: 0;
    }
}

.k-spreadsheet-popup {
    border-radius: @border-radius;

    .k-separator {
        background-color: @widget-border-color;
    }

    .k-button {
        background-color: transparent;

        &:hover {
            background-color: @hover-background;
        }
    }

    .k-state-active {
        background-color: @selected-background;
        color: contrast(@selected-text-color);

        &:hover {
            background-color: darken(@selected-background, 10%);
        }
    }
}

.k-spreadsheet-filter-menu {
    .k-details {
        border-color: @widget-border-color;
    }

    .k-details-content .k-space-right {
        background-color: @background;
    }

    .k-spreadsheet-value-treeview-wrapper {
        background-color: @background;
        border-color: @widget-border-color;
        border-radius: @border-radius 0 0 @border-radius;
    }
}

.k-syntax-ref { color: #ff8822; }
.k-syntax-num { color: #0099ff; }
.k-syntax-func { font-weight: bold; }
.k-syntax-str { color: #38b714; }
.k-syntax-error { color: red; }
.k-syntax-bool { color: #a9169c; }
.k-syntax-startexp { font-weight: bold; }
.k-syntax-paren-match { background-color: #caf200; }

.k-series-a {
    border-color: @series-a;
    background-color: fade(@series-a, 15%);
}

.k-series-b {
    border-color: @series-b;
    background-color: fade(@series-b, 15%);;
}

.k-series-c {
    border-color: @series-c;
    background-color: fade(@series-c, 15%);;
}

.k-series-d {
    border-color: @series-d;
    background-color: fade(@series-d, 15%);;
}

.k-series-e {
    border-color: @series-e;
    background-color: fade(@series-e, 15%);;
}

.k-series-f {
    border-color: @series-f;
    background-color: fade(@series-f, 15%);;
}


.k-spreadsheet-sheets-remove:hover .k-icon {
    color: #cc2222;
}

.k-spreadsheet-formula-list {
    .k-state-focused {
        background-color: @selected-background;
        color: @selected-text-color;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .k-icon.k-font-icon {
        background-image: none;
    }
}
